﻿@model SMECustomerWebsite.Models.ViewModels.CustomerManager.CustomerPortfolioViewModel

@Html.Action("SubMenuCustomer", "System")
@Html.Action("FeedbackInfo", "System")
@Html.Action("CustInfo", "System")
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <div class="col-lg-8 col-md-9 col-sm-8">
                        <h2>@SMECustomerWebsite.Core.Resources.Resource.CustFeedback.ToUpper()</h2>
                    </div>
                    <ul class="nav navbar-right panel_toolbox">
                        @Html.Action("BusinessDateInfo", "System", new { name = "TBL_CUSTOMER_FEEDBACK" })
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <p>@SMECustomerWebsite.Core.Resources.Resource.CustFeedbackDesc</p>
                </div>
                <div class="x_content">
                    @switch (Model.CurrentUser.GroupIdentifier)
                    {
                    case "1":
                    <table id="cm-customer-portfolio-vip" class="table custom_table table-bordered table-striped jambo_table">
                        <thead class="headings" id="tbl_headings">
                            <tr>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                <th class="column-title">DAO</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                <th class="column-title" width="7%">@SMECustomerWebsite.Core.Resources.Resource.Complaint.ToUpper()</th>
                                <th class="column-title" width="8%">@SMECustomerWebsite.Core.Resources.Resource.Compliment.ToUpper()</th>
                                <th class="column-title" width="7%">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    break;
                    case "2":
                    <table id="cm-customer-portfolio-vip" class="table custom_table table-bordered table-striped jambo_table">
                        <thead class="headings" id="tbl_headings">
                            <tr>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                <th class="column-title">DAO</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                <th class="column-title" width="6%">@SMECustomerWebsite.Core.Resources.Resource.Complaint.ToUpper()</th>
                                <th class="column-title" width="6%">@SMECustomerWebsite.Core.Resources.Resource.Compliment.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    break;
                    case "3":
                    <table id="cm-customer-portfolio-vip" class="table custom_table table-bordered table-striped jambo_table">
                        <thead class="headings" id="tbl_headings">
                            <tr>
                                <th class="column-title">DAO</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Complaint.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Compliment.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    break;
                    case "4":
                    <table id="cm-customer-portfolio-vip" class="table custom_table table-bordered table-striped jambo_table">
                        <thead class="headings" id="tbl_headings">
                            <tr>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Complaint.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Compliment.ToUpper()</th>
                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    break;
                    default: break;
                    }

                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
<script src="~/Scripts/custom_search_table.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="~/scripts/datepicker/moment/moment.min.js"></script>
<script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script>
<script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var totalColumn = [
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN CIF", "bSortable": false },
                        { "sName": "CUST TYPE", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }]
        var totalLenCol = 5;
        var totalCifCol = 0;
        switch (@Model.CurrentUser.GroupIdentifier)
        {
            case 1:
                totalColumn = [
                        { "sName": "REGION", "bSortable": false },
                        { "sName": "BRANCH", "bSortable": false },
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN CIF", "bSortable": false },
                        { "sName": "CUST TYPE", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }];
                totalLenCol = 9;
                totalCifCol = 4;
                break;
            case 2:
                totalColumn=  [
                        { "sName": "BRANCH", "bSortable": false },
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN CIF", "bSortable": false },
                        { "sName": "CUST TYPE", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }];
                totalLenCol = 8;
                totalCifCol = 3;
                break;
            case 3:
                totalColumn= [
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN CIF", "bSortable": false },
                        { "sName": "CUST TYPE", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }];
                totalLenCol = 7;
                totalCifCol = 2;
                break;
            default:
                break;
        }
        var table = $('#cm-customer-portfolio-vip').DataTable({
            "order": [[0, 'asc']],
            "bServerSide": true,
            "bProcessing": true,
            "responsive": true,
            "bAutoWidth": false,
            "aLengthMenu": [10, 30, 50, 100],
            "pageLength": 10,
            rowsGroup: [0, 1, 2, 3],
            "sAjaxSource": '@Url.Action("CustFeedbackData", "CustomerManager")',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
            "sPaginationType": "simple_numbers",//"full_numbers",
            "aoColumns": totalColumn,
            'fnCreatedRow': function (nRow, aData, iDataIndex) {
                $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                $('td', nRow).eq(totalLenCol).attr('id', 'td_' + iDataIndex + '_action');
                //$('td', nRow).eq(6).attr('class', 'td_action');
            },
            "aoColumnDefs": [{
                "sClass": "column-title",
                "aTargets": [totalLenCol],
                "mRender": function (data, type, full) {
                    return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[totalCifCol] + '\');\"><i class="fa fa-info"></i></a><a class=\"btn btn-primary btn-xs\"  onclick=\"showDetailCustomerI2B(\'' + full[totalCifCol] + '\', \'' + full[totalLenCol-4] + '\');\"><i class="fa fa-eye"></i></a>';
                }
            }],
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    switch (column.context[0].aoHeader[0][column.index()].cell.innerText) {
                        case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper())':
                            createFilterRegion(column, '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone)');
                            break;
                        case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader)':
                            createFilterDate(column);
                            break;
                        case '@Html.Raw(@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper())':
                            createFilterBranch(column);
                            break;
                        case '@Html.Raw(@SMECustomerWebsite.Core.Resources.Resource.Complaint.ToUpper())':
                            createFilterBalanceMulti(column,1);
                            break;
                        case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Compliment.ToUpper())':
                            createFilterBalanceMulti(column,2);
                            break;
                        case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader.ToUpper())':
                            createFilterMSBOName(column, 1);
                            break;
                        case 'DAO':
                            createFilterMSBOName(column, 2);
                            break;
                        default:
                            if (column.index() < totalLenCol) {
                                var select = $('<input type="text" class="filtet-table">')
                                                        .appendTo($(column.header()))
                                                        .on('keyup change', function () {
                                                            column.search(this.value).draw();
                                                        });
                            }
                            break;

                    }
                });
            },
            "drawCallback": function (settings) {
                $('table.custom_table th').removeClass().addClass('column-title');
            }
        });
    })
</script>
    @if (true)
    {
<script type="text/javascript">
    function showDetailCustomerI2B(cif, name) {
        var tableDetailCustomerI2B = $('#cm-cp-tb-feedback-detail').DataTable({
            destroy: true,
            "bServerSide": true,
            "bProcessing": true,
            "responsive": true,
            "bAutoWidth": false,
            "aLengthMenu": [10, 30, 50, 100],
            "pageLength": 10,
            //rowsGroup: [0, 1, 2, 3],
            bFilter: false,
            bInfo: false,
            bPaginate: false,
            "sAjaxSource": '@Url.Action("CustFeedbackDetail", "CustomerManager")' + '?cif=' + cif,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            //"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
            "sPaginationType": "simple_numbers",//"full_numbers",
            "aoColumns": [
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "USERNAME", "bSortable": false },
                        { "sName": "STATUS", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "USERNAME", "bSortable": false },
                        { "sName": "STATUS", "bSortable": false },
                        { "sName": "STATUS", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "USERNAME", "bSortable": false },
                        { "sName": "STATUS", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "USERNAME", "bSortable": false }],
        });
        $('#cust_info_name').text(name);
        $('.cm-cp-feedback-info').modal('show');
    };
</script>
<script type="text/javascript">
    function startPageTourGuide() {
        var intro = introJs();
        var steps = [
                {
                    element: '#cm-customer-portfolio-vip',
                    intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTable',
                    position: 'bottom'
                },
                {
                    element: '#cm-customer-portfolio-vip_length',
                    intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableLength',
                    position: 'right',
                },
                {
                    element: '#tbl_headings',
                    intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableSearch",
                    position: 'bottom'
                },
                {
                    element: '#cm-customer-portfolio-vip_info',
                    intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableInfo",
                    position: 'bottom'
                },
                {
                    element: '#cm-customer-portfolio-vip_paginate',
                    intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTablePaginate",
                    position: 'left'
                },
                {
                    element: '#my_account_planning0',
                    intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRow",
                    position: 'bottom'
                },
                {
                    element: '#td_0_action',
                    intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                    position: 'left'
                }
        ];
        intro.setOptions({
            steps: steps,
            showProgress: true,
            scrollToElement: true,
        });
        intro.setOption('tooltipPosition', 'auto');
        intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
        intro.start();
    }
</script>
    }

}